<template>
  <div>
    <el-table :data="searchData.slice((currpage - 1) * pagesize, currpage * pagesize)" border style="width: 100%"
              @selection-change="handleSelectionChange">
      <!--      <el-table-column-->
      <!--        type="selection"-->
      <!--        width="40">-->
      <!--      </el-table-column>-->
      <el-table-column
        label="ID"
        prop="id"
        width="290">
      </el-table-column>
      <el-table-column
        label="文件名"
        prop="name"
        width="350">
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="time"
        width="200">
      </el-table-column>
      <el-table-column
        label="页数"
        prop="totalPageNum"
        width="80">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="getPdfDetail(scope.row.id, scope.row.totalPageNum)">查看</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="prev, pager, next, sizes, total, jumper"
                   :page-sizes="[5, 10, 15, 20]"
                   :page-size="pagesize"
                   :total="searchData.length"
                   @current-change="handleCurrentChange"
                   @size-change="handleSizeChange">
    </el-pagination>
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="delVisible = false">取 消</el-button>
      <el-button type="primary" @click="deleteRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>


  export default {
    name: 'pdf',
    data () {
      return {
        searchData: [],
        pagesize: 10,
        currpage: 1,
        delVisible: false,
        msg: '',//记录每一条的信息，便于取id
        delArr: [],//存放删除的数据
        multipleSelection: [],//多选的数据
      }
    },
    created () {
      this.getPdfList()
    },
    methods: {
      getPdfList () {
        this.$axios.post( '/pdfapi/getPdfs')
          .then((data) => {
            console.log(data.data.data)
            this.searchData = data.data.data
          })
      },
      getPdfDetail (id, num) {
        this.$router.push({name: 'View', query: {id: id, num: num}})
      },
      handleCurrentChange (cpage) {
        this.currpage = cpage
      },
      handleSizeChange (psize) {
        this.pagesize = psize
      },
      handleDelete (row) {
        this.msg = row//每一条数据的记录
        this.delArr.push(this.msg.id)//把单行删除的每条数据的id添加进放删除数据的数组
        this.delVisible = true
      },

      // 确定删除
      deleteRow () {
        let url =  '/pdfapi/deletePdfFile/'
        for (let i = 0; i < this.delArr.length; i++) {
          url = url + this.delArr[i]
          this.$axios.post(url).then(res => {
            if (res.data.result_code == '0000') {
              this.$message.success('删除成功')
              this.getPdfList()
            }
          }).catch(error => {
            console.log(error)
            this.$message.error('删除失败')
          })
        }
        this.delArr = []
        this.delVisible = false//关闭删除提示
        // this.$router.go(0)
      },

      //批量删除
      delAll () {
        this.delVisible = true//显示删除弹框
        const length = this.multipleSelection.length
        for (let i = 0; i < length; i++) {
          this.delArr.push(this.multipleSelection[i].PackingId)
        }
      },
      //操作多选
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
    }
  }
</script>

<style scoped>

</style>
